<template >
  <div>
    <el-tree
      show-checkbox
      :default-checked-keys="pid"
      :data="options"
      :props="{
        checkStrictly: true,
        value: 'menuId',
        label: 'menuName',
      }"
      node-key="menuId"
      default-expand-all
      ref="menuNode"
    ></el-tree>
  </div>
</template>
<script>
import { GetMenu, AddRolePermission, GetByid } from "@/api/admin";
export default {
  data() {
    return {
      options: [],
      pid: [],
    };
  },
  props: ["rid"],
  methods: {
    //显示方法
    GetMenus() {
      GetMenu().then((res) => {
        this.options = res.data;
      });
    },
    //选中
    getChecNodes() {
      //表单
      let farm = {
        roleId: this.rid,
        permissionIdlist: this.$refs.menuNode.getCheckedKeys(),
      };
      AddRolePermission(farm).then((res) => {
        if (res.data) {
          this.$message.success("成功");
        }
      });

      //console.log(this.$refs.menuNode.getCheckedNodes());
      //console.log(this.$refs.menuNode.getCheckedKeys());
    },
    getByid() {
      GetByid(this.rid).then((res) => {
        this.pid = res.data;
        console.log(this.pid);
      });
    },
  },
  created() {
    this.GetMenus();
    this.getByid();
  },
};
</script>
<style >
.el-cascader-menu__wrap {
  height: 240px;
}
</style>